<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-show="isShow">Hello Show</div>
        <div v-if="isShow ">Hello If</div>

        <div v-if="type === 'a'">typeA</div>
        <div v-else-if="type === 'b'">typeB</div>
        <div v-else>typeC</div>

        <ul>
            <li v-for="(item, index) in items">{{index+1}} - {{item.name}} - {{item.count}}</li>
        </ul>
        
        <div v-on:click="isShow = !isShow">changeShow</div>
        <div v-on:click="changeShow">changeShow</div>
        <div v-on:click="consoleLog('log', $event)">console</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: false,
                type: 'a',
                // items: ['苹果', '西瓜', '草莓'],
                items: [
                    {
                        name: '苹果',
                        count: 10
                    },
                    {
                        name: '西瓜',
                        count: 20
                    },
                    {
                        name: '草莓',
                        count: 30
                    }
                ]
            },
            methods: {
                changeShow() {
                    this.isShow = !this.isShow;
                },
                consoleLog(log, event) {
                    console.log(log)
                    console.log(event)
                }
            }
        })
    </script>
</body>
</html>